<template>
  <div class="module_content" >
    <a class="content_box brick-item"
      v-for=" (child, index) in product" :key="index"
      @click="goToActive(child)">
      <span class="discount-card" v-if="child.activity">{{child.discount ? `降${Math.floor((1 - child.discount) * 1000) / 10}个点` : '参与活动'}}</span>
      <div class="preview_box">
        <img class="previewImg" :src="prefixImg + child.image " :title="child.originname" @error="catchErrorImage($event)"/>
      </div>
      <h3 class="title"><span v-html="child.name"></span><template v-if="child.other"> - <span v-html="child.other"></span></template></h3>
      <span class="format" v-html="child.brandName"></span>
      <h4 class="price">
        <template v-if="loginStatus === 1">
          <template v-if="child.disocunt">
            <span class="vert-mid" v-if="child.priceLowerLimit === child.priceUpperLimit">￥{{child.priceLowerLimit * child.disocunt | floatPrices}}</span>
            <span class="vert-mid" v-else>
              ￥{{child.priceLowerLimit * child.disocunt  | floatPrices}}
               - 
              {{child.priceUpperLimit * child.disocunt | floatPrices}}</span>
          </template>
          <template v-else>
            <span class="vert-mid" v-if="child.priceLowerLimit === child.priceUpperLimit">￥{{child.priceLowerLimit}}</span>
            <span class="vert-mid" v-else>
              ￥{{child.priceLowerLimit | floatPrices}}
               - 
              {{child.priceUpperLimit | floatPrices}}</span>
          </template>
        </template>
        <span class="color-yellow" v-else-if="loginStatus === 4"> 登录后查看价格</span>
        <span class="color-yellow" v-else> 审核通过可查看</span>
        <i class="yellow_shopcart iconfont el-icon-knife-shop_cart"></i>
      </h4>
    </a>
  </div>
</template>

<script>
  import {Row, Button} from 'element-ui'
  import {labels, prefixImg} from '@/tool/index'
  // import {getCookie} from '@/config/mUntils'
  import {mapState} from 'vuex'
  export default{
    name: 'product',
    components: {
      elRow: Row,
      elButton: Button
    },
    props: {
      product: [Object, Array]
    },
    data () {
      return {
        activetab: -1
      }
    },
    methods: {
      catchErrorImage (e) {
        e.target.src = require('img/newload.png')
      },
      labels (newVal) {
        let _labelarr = []
        if (newVal === null) return false
        let _arr = newVal.split(',')
        _arr.map((item, index) => {
          _labelarr.push({text: labels[item - 1], xh: item})
        })
        return _labelarr
      },
      goToActive (item) {
        console.log(item.activity)
        this.$router.push({name: 'productDetail', params: {commodityID: item.id}, query: {keyword: this.$route.query.keyword}})
      }
    },
    computed: {
      prefixImg () {
        return prefixImg
      },
      loginStatus () {
        return this.$store.getters.loginStatus
      },
      ...mapState({
        nowDiscount: state => state.user.discount
      })
    }
  }
</script>
<style lang="scss">
    .button_style{width:74%;}

    .yellow_shopcart{
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      border-radius: 50%;
      font-size: 10px;
      line-height: 22px;
      width: 20px;
      height: 20px;
      background-image: linear-gradient(18deg, #F5A310 0%, #FFCD08 100%);
    }
    .product_img{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      transform: scale(0.75);
      transform-origin: 50% 50%;
    }
    .pro_text{
      position: absolute;
      bottom: 0;
      width: 100%;
    }
</style>

